<!doctype html>
<html ng-app="myApp">
<head>
  <title>CSS Keyframe Animation</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
  <script src="http://code.angularjs.org/1.2.0-rc.2/angular-animate.js"></script>
  <style>
    @keyframes fadein-enter-animation {
      from {opacity: 0; color: green}
      to {opacity: 1; color: black;}
    }
    @-webkit-keyframes fadein-enter-animation {
      from {opacity: 0; color: green}
      to {opacity: 1; color: black;}
    }
    @keyframes fadein-leave-animation {
      from {opacity: 1; color: black;}
      to {opacity: 0;}
    }
    @-webkit-keyframes fadein-leave-animation {
      from {opacity: 1; color: black;}
      to {opacity: 0;}
    }
    .fadein.ng-enter,
    .fadein.ng-leave {
      -webkit-animation: 2s fadein-enter-animation;
      -moz-animation: 2s fadein-enter-animation;
      -o-animation: 2s fadein-enter-animation;
      animation: 2s fadein-enter-animation;
    }
    .fadein.ng-enter {
      opacity: 0;
      color: green;
    }
    .fadein.ng-enter.ng-enter-active {
      opacity: 1;
      color: black;
    }
    .fadein.ng-leave {}
    .fadein.ng-leave.ng-leave-active {
      opacity: 0;
    }
  </style>
</head>
<body>

  <div ng-controller="HomeController">
    <ul>
      <li class="fadein" ng-repeat="r in roommates">
        {{ r }}
      </li>
  </div>

  <script>
    angular.module('myApp', ['ngAnimate'])
      .controller('HomeController', function($scope) {
        $scope.roommates = [
          'Ari', 'Q', 'Sean', 'Anand'
        ];
        setTimeout(function() {
          $scope.roommates.push('Ginger');
          $scope.$apply(); // Trigger a digest

          setTimeout(function() {
            $scope.roommates.shift();
            $scope.$apply(); // Trigger digest
          }, 2000);
        }, 1000);
      });
  </script>

</body>
</html>